<template>
    <view class="evaluate ph-20 mt-20">
        <view class="w-f b-24">
            <view class="w-f h-90 top">
                <image :src="curt == 1 ? bg1 : bg2" class="w-f h-90"></image>
                <view class="type w-f h-90 f">
                    <view class="type-box f ai-c jc-c fd-c" :class="curt == 1 ? 'active' : ''" @click="changeCurt(1)">
                        <view class="fs-30 text">全部评价</view>
                        <view class="heng w-32 h-6 b-6 mt-5"></view>
                    </view>
                    <view class="type-box f ai-c jc-c fd-c" :class="curt == 2 ? 'active' : ''" @click="changeCurt(2)">
                        <view class="fs-30 text"> 顾客好评</view>
                        <view class="heng w-32 h-6 b-6 mt-5"></view>
                    </view>
                </view>
            </view>
            <view class="background-white pv-32 ph-32">
                <view v-for="(item,index) in list">
                    <view class="f ai-c">
                        <image :src="item.userAvatar" class="w-80 h-80 b-80 mr-20"></image>
                        <view>
                            <view class="fs-32 fw-500 text-color4">{{item.userNickname}}</view>
                            <view class="f ai-c mt-2">
                                <view class="fs-24 text-color3">商品评分</view>
                                <view class="f">
                                    <image
                                        :src="ky < item.scores ? star : starSelect"
                                        class="w-24 h-24 mr-8"
                                        v-for="(im, ky) in item.scores"
                                        :key="ky"
                                    ></image>
                                </view>
                                <view class="fs-24 text-color3 ml-20">{{item.createTime}}</view>
                            </view>
                        </view>
                    </view>
                    <view class="mt-24 fs-26 text-color4"
                        >{{item.content}}</view
                    >
                    <view class="f fc-w">
                        <!-- <video src="" class="w-152 h-152 b-4 mr-12 mt-12"></video> -->
                        <image :src="value" class="w-152 h-152 b-4 mr-12 mt-12" v-for="(value,key) in item.picUrls"></image>
                      <!--  <image src="../../static/logo.png" class="w-152 h-152 b-4 mr-12 mt-12"></image>
                        <image src="../../static/logo.png" class="w-152 h-152 b-4 mr-12 mt-12"></image>
                        <image src="../../static/logo.png" class="w-152 h-152 b-4 mr-12 mt-12"></image> -->
                    </view>
                </view>
                <view class="w-f h-72 b-36 fs-26 fw-600 text-color mt-32 btn f ai-c jc-c" @click='toComment'>查看全部评价</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref,toRefs,getCurrentInstance } from 'vue';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { getBaseUrl } from '@/utils/env';
import { commentList,commentPage } from '@/services/api/shop/index';
const bg1 = getBaseUrl() + '/admin-api/system/file/19/get/1b4f3ca1ec148653de5bee9f1c5c632a54b3ccd32ad484c862c63f1a3c08505f.png';
const bg2 = getBaseUrl() + '/admin-api/system/file/19/get/62ff6746d7a0f5ef7d464c725be9ce4e2ae4b565d664b00d704e73595fca3643.png';
const { proxy } = getCurrentInstance();
const list = ref<any[]>([]);
const curt = ref(1);
const id = ref(null);
const type = ref(0);
const props = defineProps({
    detail: {
        type: Object,
    },
});
getCommentList()
//获取评价
async function getCommentList() {
    const { data } = await commentPage({ spuId: detail.value.id,type:type.value,pageNo:1,pageSize:10});
	data.list.forEach((item: any) => {
	    item.createTime = proxy.$moment(item.createTime).format('YYYY.MM.DD HH:mm:ss');
	});
    list.value = data.list;
}

function changeCurt(data: number){
    curt.value = data;
    type.value = data==1?0:1;
	getCommentList()
};
function toComment(){
	uni.navigateTo({
		url:'/pages_shop/commentList?id='+detail.value.id
	})
}
const { detail } = toRefs(props);
</script>
<style lang="scss" scoped>
.evaluate {
    .btn {
        background: #faf5e6;
    }
    .top {
        position: relative;
        .type {
            position: absolute;
            left: 0;
            top: 0;
            .type-box {
                width: 50%;
                height: 100%;
                color: #fabb3c;
            }
            .active {
                .text {
                    font-weight: 600;
                    color: #222222;
                }
                .heng {
                    background: #fabb3c;
                }
            }
        }
    }
    .background-white {
        background: #fff;
        border-radius: 0 0 24rpx;
        margin-top: -5rpx;
    }
}
</style>
